<header id="header" class="d-flex flex-column align-items-end hidden-xs" role="banner">
    <div class="header-inner d-flex flex-column align-items-end">
        <div class="app-header d-flex flex-column">
            <div class="d-flex flex-column">
                <h1 class="app-logo py-3" role="heading">
                    <a href="/"><img src="/img/logo.png" alt=""></a>
                </h1>
                <nav class="app-nav d-flex flex-column" role="navigation">
                    <a href="/" class="app-link" data-active="home" title="主页">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-home"></i>
                            <div class="nav-link px-3 fs-18">主页</div>
                            <div class="unread-dot"></div>
                        </div>
                    </a>
                    <a class="app-link" href="/explore" data-active="explore" title="探索">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-search"></i>
                            <div class="nav-link px-3 fs-18">探索</div>
                        </div>
                    </a>
                    <!-- <a class="app-link" href="/lists" data-active="lists" title="列表">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-lists"></i>
                            <div class="nav-link px-3 fs-18">列表</div>
                        </div>
                    </a> -->
                    <a href="/tag" class="app-link" data-active="tag" title="标签">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-explore"></i>
                            <div class="nav-link px-3 fs-18">标签</div>
                        </div>
                    </a>
                    <a class="app-link" href="/message" data-active="message" title="消息">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-notifications"></i>
                            <div class="nav-link px-3 fs-18">消息</div>
                            <div class="unread-message">1</div>
                        </div>
                    </a>
                    <!-- <a class="app-link" href="/post" data-active="post" title="探索">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-topics"></i>
                            <div class="nav-link px-3 fs-18">动态</div>
                        </div>
                    </a> -->
                    <a href="/reward" class="app-link" data-active="reward" title="奖励">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-present"></i>
                            <div class="nav-link px-3 fs-18">奖励</div>
                        </div>
                    </a>
                    <!-- <a href="/medal" class="app-link" data-active="medal" title="勋章">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-medal"></i>
                            <div class="nav-link px-3 fs-18">勋章</div>
                        </div>
                    </a> -->
                    <?php if (session('user_id')) : ?>
                        <a class="app-link" href="/user/profile/<?= session('user_id') ?>" data-active="user" title="个人资料">
                            <div class="nav-item d-inline-flex">
                                <i class="iconfont icon-user"></i>
                                <div class="nav-link px-3 fs-18">个人资料</div>
                            </div>
                        </a>
                        <div class="dropup">
                            <a class="app-link" href="###" data-bs-toggle="dropdown" aria-expanded="false" data-active="more" title="更多">
                                <div class="nav-item d-inline-flex">
                                    <i class="iconfont icon-more3"></i>
                                    <div class="nav-link px-3 fs-18">更多</div>
                                </div>
                            </a>
                            <ul class="dropdown-menu shadow">
                                <li><a class="dropdown-item" href="/medal"><i class="iconfont icon-medal me-2"></i> 勋章</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="/user/logout">退出</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-primary create-post rounded-pill hidden-md hidden-xs hidden-sm" data-bs-toggle="modal" data-bs-target="#createPost">
                            <i class="iconfont icon-feather hidden-lg hidden-md"></i>
                            <div class="nav-link">发帖</div>
                        </button>
                        <!-- 小屏显示的发帖按钮 -->
                        <a href="javaxript:;" class="twteet-btn hidden-lg" data-bs-toggle="modal" data-bs-target="#createPost" title="发帖">
                            <div class="nav-item d-inline-flex justify-content-center">
                                <i class="iconfont icon-feather"></i>
                            </div>
                        </a>
                    <?php else : ?>
                        <a class="app-link" href="/user/login" data-active="user" title="登录">
                            <div class="nav-item d-inline-flex">
                                <i class="iconfont icon-user"></i>
                                <div class="nav-link px-3 fs-18">登录</div>
                            </div>
                        </a>
                    <?php endif; ?>
                </nav>
            </div>
            <div class="mt-auto p-3 fs-14 hidden-md hidden-xs hidden-sm">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.316 2.42a6.353 6.353 0 016.047 1.956 6.35 6.35 0 011.329 6.215v.003a.92.92 0 01-1.75-.567 4.52 4.52 0 00-5.243-5.81.918.918 0 01-.384-1.798zM2.42 16.285c.258 2.608 3.688 4.404 7.661 4.012 3.973-.392 6.985-2.826 6.727-5.435-.258-2.607-3.688-4.403-7.661-4.01-3.972.392-6.985 2.825-6.727 5.433zm15.607-4.647h.001c1.377.427 2.909 1.46 2.909 3.28 0 3.01-4.342 6.802-10.869 6.802C5.09 21.721 0 19.308 0 15.34c0-2.075 1.315-4.475 3.578-6.739 3.024-3.022 6.549-4.399 7.874-3.073.585.585.642 1.597.266 2.805-.188.584.509.299.567.275l.004-.002c2.443-1.023 4.575-1.083 5.354.03.416.594.376 1.426-.007 2.39-.177.444.055.513.392.614zm1.914-5.079a3.093 3.093 0 00-2.945-.952.79.79 0 10.33 1.547v.001a1.518 1.518 0 011.441.464c.375.416.476.984.315 1.481h.001a.791.791 0 001.505.486 3.09 3.09 0 00-.647-3.027zM9.614 15.827c.241.099.548-.015.687-.253.133-.24.047-.508-.194-.596-.236-.094-.531.02-.67.252-.134.234-.06.5.177.597zm-2.406 1.97c.62.284 1.443.015 1.827-.598.378-.62.179-1.327-.444-1.592-.615-.258-1.41.008-1.79.603-.384.597-.204 1.31.407 1.588zM5.63 14.977c.821-1.666 2.958-2.608 4.849-2.116 1.957.505 2.955 2.35 2.155 4.144-.811 1.834-3.143 2.812-5.122 2.174-1.91-.617-2.718-2.503-1.882-4.202z" fill="#BFBFBF"></path></svg>
                <p class="text-muted">全国互联网安全管理服务平台</p>
            </div>
        </div>
    </div>
</header>

<!-- Modal -->
<div class="modal fade" id="createPost" tabindex="-1" aria-labelledby="createPostLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-18" id="createPostLabel">发帖</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body composer home-composer d-flex pt-1">
                <img class="avatar avatar-snag" src="/img/avatar.jpg" alt="">
                <div class="flex-fill">
                    <form id="post-form" action="/post/submit" method="POST" enctype="multipart/form-data">
                        <textarea class="form-control border-0 px-0 js-lock-btn js-textarea" name="content" id="content" maxlength="300" spellcheck="false" placeholder="良言一句三冬暖，恶语伤人六月寒" required autofocus></textarea>
                        <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
                        <input type="file" class="d-none" name="files[]" id="files" accept="image/png,image/jpeg,image/gif" multiple>
                        <div class="composer-action d-flex align-items-center mb-2">
                            <?= mini\Template::partial('partials/_post_toolbar') ?>
                            <div class="ms-auto">
                                <span class="textarea-count" id="counter">200</span>
                                <?php if (isset($user) && isset($user->golds) <= 0) : ?>
                                    <button type="button" class="btn btn-primary fw-bold" disabled>金币不足</button>
                                <?php else : ?>
                                    <!-- <button type="button" id="submitButton" class="btn btn-primary fw-bold submitButton" disabled>发帖</button> -->
                                    <button type="submit" class="btn btn-primary fw-bold rounded-pill">发帖</button>
                                <?php endif; ?>
                            </div>
                        </div>
                    </form>
                    <div id="previewContainer"></div>
                    <!-- <img class="previewImg img-fluid rounded mb-2" id="previewImg"> -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 发帖
    document.addEventListener('DOMContentLoaded', function() {
        const MAX_FILES = 4; // 最多允许上传的文件数量
        const fileInput = document.getElementById('files');
        let files = fileInput.files;

        // 验证发帖内容
        function validateContent() {
            const content = document.getElementById('content').value.trim();
            return content.length > 0;
        }

        // 文件数量验证
        function validateFileCount() {
            if (files.length > MAX_FILES) {
                toast.error(`一次最多上传 ${MAX_FILES} 张图片！`);
                return false;
            }
            return true;
        }

        // 文件输入更改时更新文件列表并执行验证
        fileInput.addEventListener('change', function() {
            files = fileInput.files;
            validateFileCount();
        });

        // 点击发帖按钮后验证
        const submitButton = document.querySelector('.submitButton');
        if (submitButton) {
            submitButton.addEventListener('click', function() {
                if (!validateFileCount()) return;
                if (!validateContent()) {
                    toast.info('请输入帖子内容');
                    return;
                }
                let data = new FormData(document.getElementById('post-form'));
                fetch('/post/submit', {
                        method: 'POST',
                        body: data
                    })
                    .then(response => response.json())
                    .then(res => {
                        if (res.status === 'success') {
                            // 显示成功消息
                            toast.success(res.message);
                            setTimeout(() => {
                                location.reload();
                            }, 1500);
                        } else {
                            // 显示错误消息
                            toast.error(res.message);
                        }
                    })
                    .catch(error => {
                        toast.error('上传文件失败。');
                    });
            });
        }

        const fileEle = document.getElementById('files');
        const previewContainer = document.getElementById('previewContainer');
        let selectedFiles = [];

        // 创建一个用于预览的图片元素
        function createPreviewImage(file) {
            const img = document.createElement('img');
            img.classList.add('preview-image'); // 使用CSS类代替内联样式
            img.src = URL.createObjectURL(file);
            img.title = "点击删除图片";
            img.addEventListener('click', function() {
                removePreviewImage(this);
            });
            return img;
        }

        // 从预览容器中移除图片，并从文件列表中删除文件
        function removePreviewImage(img) {
            previewContainer.removeChild(img);
            const file = selectedFiles.find(f => URL.createObjectURL(f) === img.src);
            if (file) {
                const index = selectedFiles.indexOf(file);
                selectedFiles.splice(index, 1);
                URL.revokeObjectURL(img.src);
            }
        }

        fileEle.addEventListener('change', function(e) {
            previewContainer.innerHTML = '';
            selectedFiles = [];
            const files = e.target.files;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                // 添加一个简单的文件类型检查
                if (!file.type.startsWith('image/')) {
                    toast.error('只支持上传图片 -_-"');
                    continue;
                }
                selectedFiles.push(file);
                const img = createPreviewImage(file);
                previewContainer.appendChild(img);
            }
        });

        /**
         * 计算剩余字符数
         */
        const contentEle = document.getElementById('content');
        const counterEle = document.getElementById('counter');
        contentEle.addEventListener('input', function(e) {
            const target = e.target;
            const maxLength = 200;
            // 计算当前的字符数
            const currentLength = getStringLength(target.value);
            counterEle.innerHTML = Math.floor(maxLength - currentLength);
        });
    });
</script>